<template>
  <div style="padding-left: 2%">
    选择模板：
    <el-select v-model="tNumber">
      <el-option v-for="item in option" :key="item.id" :value="item.templateNumber" :label="item.templateName"/>
    </el-select>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                 style="margin-left: 1%;font-weight: bold; font-size: 16px;">字段全选
    </el-checkbox>
    <br/>
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="(city,index) in ziduanList" :label="city.nameEn" :key="index" class="checkbox-item">
        {{ city.nameCn }}
      </el-checkbox>
    </el-checkbox-group>
    <div slot="footer" class="button-down">
      <el-button type="primary" @click="daochu">导 出</el-button>
      <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {zidingyiexport, getfields} from "@/api/module/ny/dcfield";
import {listDctemplate} from "@/api/module/ny/dctemplate"
import {Message} from 'element-ui';

export default {
  dicts: ['yh_field_switch_status', 'yh_template_status', 'yh_field_derive_status'],
  props: ['bankName', 'queryParams','note1'],
  data() {
    return {
      isIndeterminate: false,
      checkList: [],
      checkAll: false,
      //回显列表
      nameList: [],
      //选择列表
      checkItem: [],
      // 模板字段表格数据
      dcfieldList: [],
      //返回的字段列表
      ziduanList: [],
      //需要查询的表信息
      table: {
        // tableName:"hu_emergency_records",
        tableName: "",
        tableNumber: '',
      },
      export: {
        // dataTable:'hu_emergency_records',
        // dataTable:'hu_emergency_cases',
        dataTable: '',
        param: [],
        title: "",

      },
      tNumber: null,
      option: [],
    };
  },

  created() {

    // this.getEXPORTList()
    this.getOptionList()
  },
  watch: {
    note1(){
      this.getOptionList()
    },
    tNumber() {
      this.table.tableNumber = this.tNumber
      this.getEXPORTList()
    },
    bankName() {
      this.getOptionList()
    },
    queryParams() {
      this.export.queryParams = this.queryParams
    }
  },
  methods: {
    getOptionList() {
      listDctemplate({databankName: this.bankName, note1:this.note1}).then(res => {
        this.option = res.rows
        //this.tNumber=null;
      })
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.nameList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.nameList.length;
    },
    getEXPORTList() {
      // this.loading = true;
      getfields(this.table).then(response => {
        // alert(response)
        // this.ziduanListChina = response[0]
        this.ziduanList = response
        // console.log(this.ziduanList)
      });
    },
    // 全选按钮状态改变时的处理函数
    handleCheckAllChange(val) {
      this.checkList = val ? this.ziduanList.map(city => city.nameEn) : [];
      this.isIndeterminate = false; // 设置为false，表示不再是半选状态
    },
    // 取消按钮
    cancel() {

      //this.option=[];
      this.checkAll=false;
      this.checkList=[];
      this.$emit("closeDialog")
    },
    //导出方法
    daochu() {
      /*this.export.param = this.checkList

      this.export.dataTable= this.bankName

      this.export.queryParams = this.queryParams
      this.export.pageNum = this.queryParams.pageNum
      this.export.pageSize = this.queryParams.pageSize
      // console.log(this.export.param)
      zidingyiexport(this.export).then(response => {
        if (response == 200) {
          Message.success('导出成功，请在桌面查看');
          this.$emit("closeDialog")
        } else if (response == 500) {
          Message.error('请选择导出字段');
        } else {
          Message.error('导出失败，请稍后重试');
        }
      });*/
      this.$emit("excel")

    },
  }
};
</script>
<style lang="scss" scoped>
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 10%; /* 一行5个，每个宽度为20% */
  box-sizing: border-box; /* 让padding和border计入宽度 */
  padding: 10px; /* 设置内边距 */
  box-sizing: border-box; /* 让padding和border计入宽度 */
}

.button-down {

  margin-left: 88%;
}
</style>
